<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<view class="top">
			<view class="status-bar"></view>
			<view class="input-box flex">
				<view class="return-img" @click="goBlind(2)">
					<image src="/static/return.png"></image>
				</view>
				<view class="left flex">
					<image src="/static/sousuo.png"></image>
					<input class="input" confirm-type="search" placeholder="搜索商品" v-model="shopValue" @confirm="searchGoods" />
				</view>
				<view class="right flex">
					<image src="/static/icon_jifen.png"></image>
					<text class="text">{{myIntegral}}</text>
				</view>
			</view>
		</view>
		<!-- 顶部渐变颜色板，层级关系所致 -->
		<view class="mantle"></view>
		<!-- banner -->
		<!-- :style="{marginTop: isFullScreen?'215rpx':'180rpx'}" -->
		<view class="banner-box" :style="{zIndex:!bannerShow?0:5,opacity:opacityShow}">
			<view class="swiper-box">
				<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :current="current" @change="currentChange">
					<swiper-item v-for="(item,index) in bannerTop" :key="index" @click="goDetails(item.productId)">
						<image class="swiper-item" :src="item.imageArr"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="touy flex" >
				<view class="itembox flex">
					<view :class="current==index?'itemxuan':'item'" v-for="(item,index) in bannerTop" :key="index"></view>
				</view>
			</view>
		</view>
		<!-- 分类 -->
		<view class="scrollbox flex" :class="!bannerShow?'fixedTop':''">
			<scroll-view class="scroll-view_H" scroll-x :scroll-left="sliding" @scroll="scrollView">
				<view class="wei" :class="defaultOp==item.id?'yi':''" v-for="(item,index) in optionData" :key="index" @click="setOption(item.id,index)">
					{{item.cateName}}</view>
			</scroll-view>
			<view class="dibu" :class="showAnimation?'donghua':'donghuaa'"
				:style="{transform:'translateX('+nav_huakuai_left+')',left: posiView+'px',top:!bannerShow?'15rpx':'90rpx'}">
			</view>
		</view>
		<!-- marginTop:!bannerShow?'-60rpx':'-110rpx',paddingTop:!bannerShow?'20rpx':'115rpx', -->
		<view class="baidi-box" :style="{height:listHeight+'px'}">
			<view class="jianbina">
				<view class="jian-box flex">
					<!-- 盲盒 -->
					<view class="blind-boxa" @click="goBlind(2)"></view>
					<view class="advert-box">
						<view class="conter" @click="goBlind(1)"></view>
						<view class="conter2" @click="goBlind(3)"></view>
					</view>
				</view>
				<!-- 商品列表 -->
				<view class="product-list">
					<!-- 有数据 -->
					<product-list :list="navList.orderList" @click_to="goDetails" v-if="navList.orderList.length>0" ></product-list>
					<!-- 为空的时候 -->
					<view class="kong-box flex" v-else>
						<image src="/static/kong.png"></image>
					</view>
				</view>
				<!-- 加载 -->
				<uni-load-more v-if="navList.orderList.length>0" :status="navList.loadingType"></uni-load-more>
			</view>
		</view>
		<!-- 中奖名单 -->
		<!-- <view class="winning-list" v-if="dynamic.length>0">
			<view class="conter flex">
				<view class="dadad">
					<image class="bgleft" src="/static/gonggao.png"></image>
				</view>
				<scroll-view class="scroll-view" :scroll-y="true" :scroll-top="scrollTop" @scrolltolower="scrolltolower"
					:scroll-with-animation="isAni" @scroll="scroll" :lower-threshold="0">
					<view class="right flex" v-for="(item,index) in dynamic" :key="index">
						<text class="text">恭喜{{item.nickname}}获得{{item.title}}盲盒</text>
						<image class="touxiang" :src="item.image"></image>
					</view>
				</scroll-view>
			</view>
		</view> -->
		<!-- 优选商品 -->
		<!-- <view class="blind-box">
			<view class="conter flex">
				<view class="item flex" v-for="(item,index) in blindList" :key="index" @click="goDetails(item.id)">
					<view class="image">
						<image :src="item.image" mode="aspectFit"></image>
					</view>
					<view class="text-box">{{item.title}}</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	var _this;
	const app = getApp();
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import productList from '@/components/product-list/product-list.vue';
	import {
		actionAsPhp
	} from '@/utils/common.js';
	export default {
		components: {
			uniLoadMore,
			productList
		},
		data() {
			return {
				pageSize: 10, //每页条数
				navList: {
					loadingType: 'more',
					page: 1,
					orderList: []
				}, //下面商品
				defaultOp: 0, //默认选项
				current:0,//swiper指示点
				optionData: [], //顶部分类
				bannerTop: [], //顶部banner
				scrollTop: 0, //滚动距离
				isAni: true, //是否开启动画
				dynamic: [],//盲盒列表
				nav_huakuai_left: "0", //导航滑块的初始位置
				posiView: 0,
				blindList: [],
				showAnimation: false,
				intervalClick:false,//为了处理商品渲染问题
				shopValue:'',//搜索用的值
				myIntegral:0,//用户的积分显示
				sliding:0,//顶部分类选择滑动位置
				isFullScreen: false,  // 是否全面屏、刘海屏
				bannerShow:true,//banner显示
				listHeight:0,//列表高度，根据屏幕适应
				opacityShow:1,//banner显示透明度
				mangheUrl:'https://game-rfs.3yakj.com/webh5/shop/manghe/v1.4/index.html?runmethod=hidetopbar',//盲盒跳转地址
			}
		},
		onReady() {},
		onLoad(options) {
			_this = this;
			// 数据不能低于三条  不然不会循环播放
			_this.startScroll();
			_this.getClass();
			_this.getUserInfo();
			
			// _this.getDynamic();
		},
		onShow() {},
		// 下拉刷新
		onPullDownRefresh() {},
		// 上拉加载
		onReachBottom() {
			_this.loadData();
		},
		// 页面滚动
		onPageScroll(e) {
			_this.bannerShow=e.scrollTop>127?false:true;
			if(e.scrollTop>30){
				_this.opacityShow=((70-e.scrollTop)/100);
				if(_this.opacityShow<0){
					_this.opacityShow=0;
				}
			}
			else{
				_this.opacityShow=1;
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.top').boundingClientRect(data => {
			  _this.listHeight=window.screen.height-data.height;
			}).exec();
			const rate = window.screen.height / window.screen.width;    
			let limit =  window.screen.height == window.screen.availHeight ? 1.8 : 1.65; // 临界判断值   
			// window.screen.height为屏幕高度
			//  window.screen.availHeight 为浏览器 可用高度
			if (rate > limit) {
			    this.isFullScreen = true;
			}
		},
		methods: {
			/* 监听是否滚到底部 */
			scrolltolower(e) {
				let timer = null;
				clearTimeout(timer);
				this.isAni = false;
				setTimeout(() => {
					this.scrollTop = 0;
					timer = setTimeout(() => {
						this.isAni = true;
					}, 100);
				}, 3000);
			},
			async scroll(e) {
				if (!e) {
					await this.scrolltolower();
					await this.startScroll();
				} else {
					let timeStamp = e.timeStamp.toFixed(0);
					if (this.scrollStartTime) {
						//判断是自动滚动还是鼠标滚动 是否在定时器的时间范围内
						if (timeStamp - this.scrollStartTime <= 900) {
							clearInterval(this.scrollTimer);
							clearTimeout(this.scrollEndTimer);
							//记录当前的滚动距离
							// console.log(this.scrollTop)
							this.scrollTop = e.detail.scrollTop;
							//重新挂载滚动定时器
							this.scrollEndTimer = setTimeout(() => {
								this.startScroll();
							}, 3000);
						}
					}
					this.scrollStartTime = timeStamp;
				}
			},
			/* 开始滚动 */
			startScroll() {
				clearInterval(this.scrollTimer);
				this.scrollTimer = setInterval(() => {
					this.scrollTop += 44;
				}, 3000);
			},
			currentChange(event){
				_this.current=event.detail.current;
			},
			// 盲盒
			goBlind(id){
				if(id==2||id==1){
					window.location.href=_this.mangheUrl;
					// let data = {};
					// data.android = {
					// 	app_open: "webview",
					// 	url: 'https://game-rfs.3yakj.com/webh5/shop/manghe/v1.0/?runmethod=banrefresh_hidetopbar',
					// };
					// data.ios={
					// 	app_open: "webtk",
					// 	url: "https://game-rfs.3yakj.com/webh5/shop/manghe/v1.0/?runmethod=banrefresh_hidetopbar_popdirectionfromrighttoleft_usewebcache&edge=0_0_0_0"
					// };
					// actionAsPhp(data);
				}
				else{
					_this.$api.msg('敬请期待');
				}
			},
			setOption(id,index) {
				if (_this.defaultOp == id) {
					return;
				}
				if(_this.intervalClick){
					return;
				}
				_this.intervalClick=true;
				setTimeout(function(){
					_this.intervalClick=false;
				},300)
				_this.shopValue='';
				_this.defaultOp = id;
				_this.navList.page = 1;
				_this.navList.loadingType = 'more';
				_this.navList.loaded = false;
				_this.showAnimation = true;
				_this.reset_bleft(index);
				_this.loadData('reset');
			},
			//点击切换设置标试点的位置
			reset_bleft(index) {
				_this.nav_huakuai_left = index * 154 + 'rpx';
			},
			scrollView(e) {
				_this.sliding=e.detail.scrollLeft;
				_this.showAnimation = false;
				if (e.target.scrollLeft > _this.posiView) {
					_this.posiView = -e.target.scrollLeft;
				} else if (e.target.scrollLeft < _this.posiView) {
					_this.posiView = e.target.scrollLeft;
				}
			},
			// 中奖名单
			getDynamic(){
				_this.$HTTP({
					method: 'GET',
					url: 'myBack/listAll',
					data: {
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					if (res.data) {
						_this.dynamic=res.data;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getUserInfo(){
				_this.$HTTP({
					method: 'GET',
					url: 'fjStoreMember/create',
					data: {
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					_this.$HTTP({
						method: 'GET',
						url: 'fjStoreMember/getUserInfo',
						data: {
							"time": Date.parse(new Date())
						},
						// header:'form' 
					}).then(res => {
						if (res.data) {
							_this.myIntegral=res.data.balance;
						}
					}).catch(err => {
						console.log(err)
					})
				}).catch(err => {
					console.log(err)
				})
			},
			// 搜索商品
			searchGoods(e){
				uni.hideKeyboard();
				_this.defaultOp=_this.optionData[0].id;
				_this.reset_bleft(0);
				_this.sliding = 0;
				_this.navList.page = 1;
				_this.navList.loadingType = 'more';
				_this.navList.loaded = false;
				var navItem = _this.navList;
				//这里是将订单挂载到tab列表下
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					return; //防止数据没有了还在加载
				}
				navItem.loadingType = 'loading';
				_this.$HTTP({
					method: 'POST',
					url: 'fjStoreProduct/getProductList',
					data: {
						"storeName": e.detail.value,
						"page": navItem.page,
						"size": _this.pageSize,
						"cateId": _this.defaultOp,
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					navItem.page++;
					res.data.content.forEach(item => {
						item.newprice=item.priceMoney?item.priceMoney.toFixed(2):0;
					})
					navItem.orderList=res.data.content;
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
					//判断第一次的数据有没有pageSize的条数  没有则return
					if (res.data.content.length <= _this.pageSize && res.data.content.length >= res.data.total) {
						navItem.loadingType = 'noMore';
						return;
					}
					//判断分页后的数据还有没有  没有则return
					if (res.data.content.length < _this.pageSize || res.data.content.length == 0) {
						navItem.loadingType = 'noMore';
						return;
					}
					//判断是否还有数据， 有改为 more， 没有改为noMore 
					navItem.loadingType = 'more';
				
				}).catch(err => {
					console.log(err)
				})
			},
			getClass() {
				_this.$HTTP({
					method: 'GET',
					url: 'fjStoreProduct/home',
					data: {
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					if (res.data) {
						_this.defaultOp=res.data.Cate[0].id;
						_this.optionData = res.data.Cate;
						_this.bannerTop = res.data.topBanner;
						// if(res.data.garagekit.length>8){
						// 	_this.blindList = res.data.garagekit.splice(0,8);
						// }
						_this.loadData();
					}
				}).catch(err => {
					console.log(err)
				})
			},
			goDetails(id){
				uni.navigateTo({
				    url: '/pages/details/details?data='+id
				});
			},
			//获取订单列表
			loadData(source) {
				var navItem = _this.navList;
				//这里是将订单挂载到tab列表下
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (navItem.loadingType === 'noMore') {
					return; //防止数据没有了还在加载
				}
				navItem.loadingType = 'loading';
				_this.$HTTP({
					method: 'POST',
					url: 'fjStoreProduct/getProductList',
					data: {
						"storeName": _this.shopValue,
						"page": navItem.page,
						"size": _this.pageSize,
						"cateId": _this.defaultOp,
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					navItem.page++;
					res.data.content.forEach(item => {
						item.newprice=item.priceMoney?item.priceMoney.toFixed(2):0;
					})
					if(source=='reset'){
						if(res.data.content.length>0){
							navItem.orderList=res.data.content;
						}
						else{
							navItem.orderList=[];
						}
					}
					else{
						res.data.content.forEach(item => {
							navItem.orderList.push(item);
						})
					}
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
					//判断第一次的数据有没有pageSize的条数  没有则return
					if (res.data.content.length <= _this.pageSize && res.data.content.length >= res.data.total) {
						navItem.loadingType = 'noMore';
						return;
					}
					//判断分页后的数据还有没有  没有则return
					if (res.data.content.length < _this.pageSize || res.data.content.length == 0) {
						navItem.loadingType = 'noMore';
						return;
					}
					//判断是否还有数据， 有改为 more， 没有改为noMore 
					navItem.loadingType = 'more';

				}).catch(err => {
					console.log(err)
					_this.navList.orderList=[];
				})
			},
		}
	}
</script>
<style lang="less">
	page {
		width: 100%;
		background: #FBFBFF;
	}
</style>
<style coped lang="less">
	.donghua {
		transition: all 0.4s;
	}
	.donghuaa{
		transition: all 0s;
	}
	
	.fixedTop{
		position: fixed !important;
		top: 82px;
		left: 0;
		padding-top: 15rpx !important;
		margin-top: 0 !important;
		z-index: 16 !important;
	}
	.content {
		width: 100%;
		box-sizing: border-box;
		// 顶部导航栏
		.top {
			width: 100%;
			height: 180rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
			background: linear-gradient(90deg, #9BF0EC 0%, #B0E1FC 31%, #B9E1FC 66%, #DF98FF 100%);
			box-sizing: border-box;
			.status-bar {
				height: 72rpx;
			}
		
			.input-box {
				width: 100%;
				box-sizing: border-box;
				padding: 0 20rpx;
				align-items: center;
				justify-content: space-between;
				.return-img{
					width: 25rpx;
					height: 43rpx;
					margin-right: 30rpx;
					image{
						width: 25rpx;
						height: 43rpx;
					}
				}
				.left{
					width: 100%;
					height: 64rpx;
					background: rgba(255, 255, 255, 0.6);
					border: 1rpx solid #FFFFFF;
					border-radius: 43rpx;
					box-sizing: border-box;
					padding: 0 24rpx;
					align-items: center;
					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 12rpx;
					}
							
					.input {
						width: 100%;
						font-size: 26rpx;
					}
				}
				.right{
					height: 68rpx;
					background: rgba(255, 255, 255, 0.6);
					border: 1rpx solid #FFFFFF;
					border-radius: 43rpx;
					box-sizing: border-box;
					padding: 0 15rpx 0 10rpx;
					align-items: center;
					margin-left: 24rpx;
					image{
						width: 58rpx;
						height: 58rpx;
					}
					.text{
						font-family: DIN;
						margin-left: 49rpx;
						color: #FF844D;
					}
				}
			}
		}
		.mantle{
			width: 100%;
			height: 260rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 3;
			background: linear-gradient(90deg, #9BF0EC 0%, #B0E1FC 31%, #B9E1FC 66%, #DF98FF 100%);
		}
		
		// banner
		.banner-box {
			width: 100%;
			height: 260rpx;
			position: relative;
			margin-top: 160rpx;
			z-index: 6;
			.swiper-box {
				width: 100%;
				box-sizing: border-box;
				padding: 0 20rpx;
				position: absolute;
				bottom: 40rpx;
				left: 0;
				z-index: 5;
				.swiper {
					width: 100%;
					height: 200rpx;
					border-radius: 32rpx;
					overflow: hidden;
		
					.swiper-item {
						width: 100%;
						height: 100%;
						text-align: center;
					}
				}
			}
			.touy{
				width: 100%;
				height: 136rpx;
				background-image: url('~@/static/dadda.png');
				background-size: 100% 100%;
				position: absolute;
				bottom: 0rpx;
				left: 0;
				z-index: 2;
				align-items: flex-end;
				justify-content: center;
				box-sizing: border-box;
				padding-bottom: 13rpx;
				.itembox{
					align-items: center;
					.item{
						width: 15rpx;
						height: 15rpx;
						background: #FFFFFF;
						opacity: 0.6;
						border-radius: 50%;
						margin: 0 4rpx;
						margin-top: -30rpx;
					}
					.itemxuan{
						width: 25rpx;
						height: 15rpx;
						background: #FFFFFF;
						opacity: 1;
						border-radius: 29rpx;
						margin: 0 4rpx;
						margin-top: -30rpx;
					}
				}
			}
		}
		// 分类选项
		.scrollbox {
			width: 100%;
			// height: 50px;
			margin-top: -100rpx;
			align-items: center;
			box-sizing: border-box;
			padding-top: 90rpx;
			padding-bottom: 20rpx;
			position: relative;
			overflow: hidden;
			background: #FBFBFF;
			border-top-left-radius: 28rpx;
			border-top-right-radius: 28rpx;
			z-index: 4;
			.dibu {
				width: 154rpx;
				height: 56rpx;
				position: absolute;
				top: 15rpx;
				z-index: 2;
				background-image: url('~@/static/xuanzhong.png');
				background-size: 100% 100%;
			}
		
			.scroll-view_H {
				width: 100%;
				height: 100%;
				white-space: nowrap;
				z-index: 3;
		
				.wei {
					width: 154rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #81839B;
					display: inline-block;
				}
				.yi{
					font-size: 34rpx;
					font-weight: bold;
					color: #34333B;
				}
			}
		}
		.baidi-box{
			width: 100%;
			background: #FBFBFF;
			box-sizing: border-box;
			z-index: 4;
			position: relative;
			.jianbina{
				width: 100%;
				padding-bottom: 50rpx;
				background: #FBFBFF;
				.jian-box{
					width: 100%;
					box-sizing: border-box;
					padding: 0 20rpx;
					align-items: center;
					justify-content: space-between;
					// 盲盒
					.blind-boxa {
						width: 344rpx;
						height: 362rpx;
						background-image: url('~@/static/box_gift.png');
						background-size: 100% 100%;
					}
					// 广告
					.advert-box {
						width: 344rpx;
						.conter {
							width: 100%;
							height: 172rpx;
							background-image: url('~@/static/box_shiwu.png');
							background-size: 100% 100%;
						}
						.conter2 {
							width: 100%;
							height: 172rpx;
							background-image: url('~@/static/box_zuanshi.png');
							background-size: 100% 100%;
							margin-top: 18rpx;
						}
					}
				}
				// 商品列表
				.product-list {
					width: 100%;
					min-height: 500rpx;
					box-sizing: border-box;
					padding: 6rpx 20rpx 0 20rpx;
					.kong-box{
						width: 100%;
						align-items: center;
						justify-content: center;
						image{
							width: 375rpx;
							height: 375rpx;
						}
					}
				}
			}
		}
		

		// 中奖名单
		.winning-list {
			width: 100%;
			background: #252525;
			box-sizing: border-box;
			padding: 15rpx 30rpx 15rpx 30rpx;

			.conter {
				width: 100%;
				height: 44px;
				background: #5C4D42;
				border-radius: 5rpx;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding-right: 6rpx;

				.dadad {
					width: 135rpx;
					height: 90rpx;

					.bgleft {
						width: 135rpx;
						height: 90rpx;
						margin-left: -4rpx;
						margin-top: -6rpx;
					}
				}

				.scroll-view {
					width: 100%;
					height: 44px;

					.right {
						width: 100%;
						height: 100%;
						box-sizing: border-box;
						padding-left: 105rpx;
						align-items: center;
						justify-content: space-between;

						.text {
							font-size: 24rpx;
							color: #FFFFFF;
						}

						.touxiang {
							width: 76rpx;
							height: 76rpx;
							border-radius: 5rpx;
						}
					}
				}
			}
		}

		// 优选商品
		.blind-box {
			width: 100%;
			background: #252525;
			box-sizing: border-box;
			padding: 15rpx 0 5rpx 0;
			overflow: hidden;
			.conter {
				width: 100%;
				height: 100%;
				flex-wrap: wrap;
				align-items: flex-start;
				justify-content: flex-start;
				.item {
					width: 25%;
					margin-bottom: 20rpx;
					justify-content: center;
					flex-wrap: wrap;
			
					.image {
						width: 108rpx;
						height: 104rpx;
			
						image {
							width: 108rpx;
							height: 104rpx;
						}
					}
			
					.text-box {
						width: 100%;
						text-align: center;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-top: 10rpx;
					}
				}
			}
		}
	}
</style>
